<template>
  <div class="about">
    <p>本公司郑重声明：</p>
    <p>
      不会收集用户的喜好，不向用户推广任何广告，不收取任何厂家额外的广告费，平等对待每一个广告。
    </p>
    <p class="desc">让看广告不再成为您的负担</p>
    <div class="toufang" @click="ad" :class="{ 'ad-active': adActive }">
      <svg
        t="1605608358002"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2449"
        width="30"
        height="30"
      >
        <path
          d="M490.666667 298.666667c-36.266667 0-64 27.733333-64 64 0 36.266667 27.733333 64 64 64 36.266667 0 64-27.733333 64-64C554.666667 326.4 526.933333 298.666667 490.666667 298.666667zM490.666667 384c-12.8 0-21.333333-8.533333-21.333333-21.333333 0-12.8 8.533333-21.333333 21.333333-21.333333s21.333333 8.533333 21.333333 21.333333C512 375.466667 503.466667 384 490.666667 384zM618.666667 298.666667c-12.8 0-21.333333 8.533333-21.333333 21.333333 0 12.8 8.533333 21.333333 21.333333 21.333333s21.333333-8.533333 21.333333-21.333333C640 307.2 631.466667 298.666667 618.666667 298.666667zM960 298.666667c-4.266667 0-6.4 0-8.533333 2.133333l0 0L725.333333 413.866667 725.333333 298.666667c0-46.933333-38.4-85.333333-85.333333-85.333333L128 213.333333c-46.933333 0-85.333333 38.4-85.333333 85.333333l0 426.666667c0 46.933333 38.4 85.333333 85.333333 85.333333l512 0c46.933333 0 85.333333-38.4 85.333333-85.333333l0-115.2 226.133333 113.066667 0 0C953.6 725.333333 955.733333 725.333333 960 725.333333c12.8 0 21.333333-8.533333 21.333333-21.333333L981.333333 320C981.333333 307.2 972.8 298.666667 960 298.666667zM640 768 128 768c-23.466667 0-42.666667-19.2-42.666667-42.666667l597.333333 0C682.666667 748.8 663.466667 768 640 768zM682.666667 682.666667 85.333333 682.666667 85.333333 298.666667c0-23.466667 19.2-42.666667 42.666667-42.666667l512 0c23.466667 0 42.666667 19.2 42.666667 42.666667L682.666667 682.666667zM938.666667 669.866667l-213.333333-106.666667 0-102.4 213.333333-106.666667L938.666667 669.866667z"
          p-id="2450"
          fill="#ffffff"
        ></path>
      </svg>
    </div>
    <div class="back" @click="back">
      <svg t="1605609350182" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3252" width="20" height="20"><path d="M438.4 297.6c12.8 12.8 12.8 28.8 3.2 41.6l-3.2 3.2L300.8 480H800c19.2 0 32 12.8 32 32 0 16-12.8 28.8-28.8 32H300.8l137.6 137.6c12.8 12.8 12.8 28.8 3.2 41.6l-3.2 3.2c-12.8 12.8-28.8 12.8-41.6 3.2l-3.2-3.2-192-192-3.2-3.2-3.2-3.2-3.2-3.2V499.2l3.2-3.2 3.2-3.2 3.2-3.2 192-192c12.8-12.8 32-12.8 44.8 0z" fill="#ffffff" p-id="3253"></path></svg>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      adActive: false,
    };
  },
  methods: {
    ad(e) {
      this.adActive = true;
      Toast("想要投放视频，添加微信：helloWord123");
    },
    back() {
      this.$router.back()
    }
  },
};
</script>

<style lang="less" scoped>
.about {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: linear-gradient(#f6d365, #fda085);
  color: aliceblue;
  p {
    text-align: center;
    margin: 15px;
    line-height: 30px;
  }
  .desc {
    font-weight: 700;
    font-size: 20px;
  }
  .toufang {
    position: absolute;
    right: 10px;
    top: 5px;
  }
  .back {
    position: absolute;
    left: 10px;
    top: 5px;
  }
  .ad-active {
    animation: rotate 1.5s linear;
  }

  @keyframes rotate {
    0% {
      transform: rotateZ(0deg); /*从0度开始*/
    }
    100% {
      transform: rotateZ(360deg); /*360度结束*/
    }
  }
}
</style>